<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 50px auto;
                background: pink;
                display: none;
            }
        </style>
    </head>
    <body>
    <input type="button" value="淡入" id="btn">
    <input type="button" value="淡出" id="btn1">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </body>
    </html>
        <script src="js/jquery-1.10.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $(".box").fadeIn(5000,function () {
                        $(this).next().fadeIn(5000,arguments.callee);
                    });
                })

                $("#btn1").click(function () {
                    $(".box").fadeOut(3000,function () {
                        $(this).next().fadeOut(5000,arguments.callee);
                    });
                })
            })
        </script>